<template>
    <swiper :options="swiperOption">
        <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    require('swiper/dist/css/swiper.css')
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: 'carrousel',
        components: {
            swiper,
            swiperSlide
        },
        props: {
            swiperOption: Object
        },
        data() {
            return {
                swiperSlides: [1, 2, 3, 4, 5]
            }
        },
        mounted() {
            setInterval(() => {
                console.log('simulate async data')
                let swiperSlides = this.swiperSlides
                if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
            }, 3000)
        }
    }
</script>

<style lang="scss" scoped>

</style>
